<template>
  <div>
    <el-dialog
      title="hk-autoseo-seed_keywords表格管理"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      class="mt-dialog"
      width="80%"
      @close="close"
    >

      <el-form
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="120px"
        style="margin-left: 8%"
      >
        <el-form-item label="选择博客" label-width="120px">
          <el-button size="mini" type="primary" @click="promoteVisiable=true">选择博客</el-button>
        </el-form-item>
        <el-form-item label="root_domain" label-width="120px">
          <el-input v-model="temp.root_domain" />
        </el-form-item>
        <el-form-item label="category(ID)" label-width="120px">
          <el-input v-model="temp.category" />
        </el-form-item>
        <el-form-item label="来源" label-width="120px">
          <el-input v-model="temp.source" />
        </el-form-item>
        <el-form-item label="volume(公共)" label-width="120px">
          <el-input v-model="temp.volume" />
        </el-form-item>
        <el-form-item label="关键词(关键词和搜索量用|分开，每行一条数据)" label-width="120px">
          <el-input v-model="temp.keywords" type="textarea" :rows="10" placeholder="每行一个" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleAddRows">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <wppromote
      :promote-visiable="promoteVisiable"
      @save="handleSaveAutoPostInfo"
      @closewppromoteDialog="promoteVisiable=false"
    />
  </div>
</template>

<script>
import Wppromote from '../../cms/elements/wppromote'
import { Get as GetWpAccount } from '@/api/cms/wpaccount'
import { Post } from '@/api/tablestore/hk_autoseo_seed_keywords_index'

export default {
  name: 'HkAutoseoSeedKeywords',
  components: { Wppromote },
  props: ['isVisible'],
  data() {
    return {
      promoteVisiable: false,
      temp: {
        keywords: '',
        category: '',
        volume: 100,
        source: 'semrush',
        root_domain: ''
      },
      dialogVisible: false
    }
  },
  watch: {
    isVisible(v) {
      this.dialogVisible = v
    }
  },
  methods: {
    handleSaveAutoPostInfo(value) {
      this.temp.category = ''
      const _ids = []
      for (let i = 0; i < value.categories.length; i++) {
        _ids.push(value.categories[i].id_category)
      }
      console.log(value)
      this.handleGetAccount(value.account_id)
      this.temp.category = _ids.join(',')
    },
    handleGetAccount(id) {
      GetWpAccount(id, null).then(response => {
        this.temp.root_domain = response.data.root_domain
      }).catch(err => {
        console.log(err)
      })
    },
    handleAddRows() {
      Post(this.temp).then((response) => {
        this.temp.keywords = ''
        this.$message.success('添加成功:' + response.total_add)
      }).catch(error => {
        console.log(error)
      })
    },
    resetTemp() {
      this.temp = {
        keywords: '',
        category: '',
        volume: 100,
        source: 'semrush',
        root_domain: ''
      }
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .top >>> .el-select .el-input {
    width: 350px;
  }

  .top >>> .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .top {
    padding-left: 20px;
    margin-bottom: 30px;
    margin-top: 28px;
  }

  .input-with-select {
    width: calc(100% - 200px);
  }

  .add-btn {
    float: right;
    margin-right: 20px;
    width: 150px
  }

  .mt-pagination {
    float: right;
    margin-top: 5px;
  }

  .app-container >>> .el-dialog {
    margin-top: 48px !important;
    margin-bottom: 68px;
  }

  .mt-dialog >>> .el-transfer-panel {
    width: calc(50% - 60px);
  }

  .mt-form >>> .el-select {
    width: 100%;
  }

  .mt-form >>> .el-input__inner {
    width: 100%;
  }

  .mt-dialog >>> .el-dialog {
    margin-top: 60px;
    /*margin: 168px auto !important;*/
  }

  .mt-dialog >>> .el-dialog__body {
    padding-bottom: 100px;
  }
</style>
